<template>
  <div class="desktop-content" id="desktop-content">

    <time-component/>
    <search-component/>
    <n-grid cols="34" item-responsive responsive="screen">
      <n-grid-item span="30 s:30 m:30 l:28 xl:28 2xl:28" offset="2 s:2 m:2 l:3 xl:3 2xl:3">
        <n-grid id="n-grid" cols="2 s:3 m:4 l:5 xl:6 2xl:7" x-gap="0 s:5 m:15 l:25 xl:35 2xl:55" y-gap="1 s:2 m:4 l:8 xl:16 2xl:32" item-responsive responsive="screen">
          <n-grid-item v-for="item in list" :key="item.id">
            <div class="app-card" >
              <n-card hoverable :bordered="false" size="small" :id="'app-' + item.id" :style="{height: cardHeight+'px', backgroundColor: 'rgba(0,0,0,0)'}">
                <div>
                  {{item.name}}
                </div>
              </n-card>
            </div>
          </n-grid-item>
        </n-grid>
      </n-grid-item>
    </n-grid>

    <n-modal v-model:show="showModal">
      <n-card
          closable @close="showModal = false"
          title="模态框"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
      >
        <template #header-extra>
          <n-icon size="18">
            <expand-alt-outlined/>
          </n-icon>
        </template>
        <time-component/>
        <search-component/>
        <!--          <n-loading-bar-provider>
                    <wallpaper-content/>
                  </n-loading-bar-provider>-->
        <template #footer>
          尾部
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" src="./script.ts"></script>

<style scoped>@import './style.css';</style>
